import React, { Component } from "react";
import "./css/02-tabsBar.css";
import Video from "./tabsComponent/Video";
import Zixun from "./tabsComponent/Zixun";
import Mine from "./tabsComponent/Mine";

export default class App extends Component {
  state = {
    list: [
      {
        id: 1,
        text: "电影",
      },
      {
        id: 2,
        text: "资讯",
      },
      {
        id: 3,
        text: "我的",
      },
    ],
    activeIndex: 0,
  };
  tabsFn() {
    if (this.state.activeIndex == 0) {
      return <Video />;
    } else if (this.state.activeIndex == 1) {
      return <Zixun />;
    } else {
      return <Mine />;
    }
  }
  render() {
    return (
      <section>
        <div>{this.tabsFn()}</div>
        <ul>
          {this.state.list.map((item, index) => (
            <li
              onClick={() => this.handleClick(index)}
              key={item.id}
              className={this.state.activeIndex === index ? "active" : ""}
            >
              {item.text}
            </li>
          ))}
        </ul>
      </section>
    );
  }
  handleClick(index) {
    this.setState({
      activeIndex: index,
    });
  }
}
